<template>
  <div class="lineChart98" ref="lineChart98"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  legend: null,
  series: [
    {
      name: "",
      type: "pie",
      roundCap: true,
      radius: null,
      center: null,
      color: null,
      data: null,
      label: {
        fontSize: 16,
        color: "inherit",
        formatter: (item) => {
          return `${item.percent}%`;
        },
      },

      itemStyle: {
        borderColor: "#fff",
        borderWidth: 10,
      },
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineChart98);
      this.setOptionsFn();
    },
    setOptionsFn() {
      // options.legend = this.echartsData.legendObj;
      options.series[0].name = this.echartsData.chartName;
      options.series[0].color = this.echartsData.colors;
      if (this.echartsData.chartType === "area") {
        options.series[0].roseType = "area";
      }
      options.series[0].radius = this.echartsData.chartSize;
      options.series[0].data = this.echartsData.arr;
      options.series[0].center = this.echartsData.chartCenter;
      options.legend = this.echartsData.legendObj;
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="less" scoped>
.lineChart98 {
  width: 100%;
  height: 100%;
}
</style>
